<!DOCTYPE html>
<html lang="zh-CN">
{%  load staticfiles %}
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="applicable-device" content="pc,mobile">
    <!-- Bootstrap core CSS -->
    <link href="https://img.jigao616.com/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://img.jigao616.com/css/style.css" rel="stylesheet">
    <link href="/static/css/common/common.css" rel="stylesheet">
    <title>数据</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" href="http://www.rpcomputationalbiology.cn/static/style.css">
    <link rel="stylesheet" href="http://www.rpcomputationalbiology.cn/static/css/button.css">

    <!--JQUERY -->
    <!--模版的方式渲染本地的jquery。这里也可以去渲染服务 -->
    <script type="text/javascript" src="/static/script/map/echarts.min.js"></script>
    <script src="{% static 'script/common/jquery-3.1.1.min.js' %}"></script>
    <script src="https://img.jigao616.com/js/html5shiv.min.js"></script>
    <script src="/static/script/common/common.js"></script>
    <script src="/static/script/index/index.js"></script>
</head>
<body>
<header class="header-area">
    <!-- Top Header Area -->
    <div class="top-header-area d-flex justify-content-between align-items-center">
    </div>
    <!-- Navbar Area -->
    <div id="sticky-wrapper" class="sticky-wrapper is-sticky" style="height: 80px;">
        <div class="clever-main-menu" style="width: 100%; position: fixed; top: 0px; z-index: inherit;">
        <div class="classy-nav-container light left breakpoint-off">
            <!-- Menu -->
            <nav class="classy-navbar justify-content-between" id="cleverNav">

                <!-- Logo -->
                <a class="nav-brand" href="/index"><img src="{% static 'image/logo4.png' %}" alt="" style="width:550px;height:80px;margin-right:15px"></a>

                <!-- Navbar Toggler -->
                <div class="classy-navbar-toggler">
                    <span class="navbarToggler"><span></span><span></span><span></span></span>
                </div>

                <!-- Menu -->
                <div class="classy-menu">

                    <!-- Close Button -->
                    <div class="classycloseIcon">
                        <div class="cross-wrap"><span class="top"></span><span class="bottom"></span></div>
                    </div>

                    <!-- Nav Start -->
                    <div class="classynav">
                        <ul>
                            <li><a href="/index">主页</a></li>
                            <li ><a href="/visual">例子</a>
                            <li ><a href="/mysystem">预测</a>
                            <li><a href="/incidence">发病情况</a></li>
                            <li><a href="/inform/inform">研究现状</a></li>
                            <li><a href="/upfile">上传</a></li>
                        </ul>

<!--                        &lt;!&ndash; Search Button &ndash;&gt;-->
<!--                        <div class="register-login-area">-->
<!--                            <a href="/analysis" class="btn active">Run TPP</a>-->
<!--                        </div>-->

                        <!-- Register / Login -->
<!--                        <div class="register-login-area">-->
<!--                            <a href="/user/register" class="btn">注册</a>-->
<!--                            <a href="/user/login" class="btn">登录</a>-->
<!--                        </div>-->

                    </div>
                    <!-- Nav End -->
                </div>
            </nav>
        </div>
    </div></div>
</header>


<div class="container" style="height:500px">
    <div class="col-box">
        <div class="col-box-header" style="height:500px">
            <button onclick="day()">获取每天情况</button>
                <button onclick="mon()">获取每月情况</button>
                <button onclick="year()">获取每年情况</button>
            <div id="main" style="width: 600px;height:400px;margin:auto">

            </div>

        </div>

    </div>
</div>


<div class="footer">
            <p>
                <a href="javascript:void(0)">关于我们</a>
                <span class="line">|</span>
                <a href="javascript:void(0)">联系我们</a>
                <span class="line"></span>
            </p>
            <p>Copyright © 2018 All Rights Reserved. </p>
            <p> <a href="javascript:void(0)" target="_blank" rel="nofollow">XICP备xxxxx号-x</a>公网安备 xxxxxxxxxx号 归xxx所有</p>
         </div>
</body>

<script>

function year(){
	    var ddata;
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTday_data' %},-->
<!--                type: "POST",-->
<!--                async: false,-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    ddata = data;-->
<!--                }-->
<!--            });-->
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTmon_data' %},-->
<!--                type: "POST",-->
<!--                async: false,-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    ldata = data;-->
<!--                }-->
<!--            });-->
            $.ajax({
                url: {% url 'get_FHTyear_data' %},
                async: false,
                type: "POST",
                data: {},
                success: function (data) {
<!--                    data = JSON.parse(data);-->
                    ddata = data;
                }
            });
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
   title: {
        text: '  '
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['FLU','HIV','TUB']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ddata[0]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'FLU',
            type:'line',
            stack: '总量1',
            data:ddata[1]
<!--            data:[2692,2513,2609,2576,2310,2226,2034,1993,1798,1830]-->
        },
        {
            name:'HIV',
            type:'line',
            stack: '总量2',
            data:ddata[2]
<!--            data:[1216,1786,1262,1485,2198,2184,2084,2081,2084,1320]-->
        },
        {
            name:'TUB',
            type:'line',
            stack: '总量',
            data:ddata[3]
<!--            data:[39,55,57,86,79,113,127,152,142,141]-->
        }
    ]
};
myChart.setOption(option);
    }

function mon(){
	    var ddata;
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTday_data' %},-->
<!--                type: "POST",-->
<!--                async: false,-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    ddata = data;-->
<!--                }-->
<!--            });-->
            $.ajax({
                url: {% url 'get_FHTmon_data' %},
                type: "POST",
                async: false,
                data: {},
                success: function (data) {
<!--                    data = JSON.parse(data);-->
                    ddata = data;
                }
            });
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTyear_data' %},-->
<!--                async: false,-->
<!--                type: "POST",-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    hdata = data;-->
<!--                }-->
<!--            });-->
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
   title: {
        text: '  '
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['FLU','HIV','TUB']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ddata[0]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'FLU',
            type:'line',
            stack: '总量1',
            data:ddata[1]
<!--            data:[2692,2513,2609,2576,2310,2226,2034,1993,1798,1830]-->
        },
        {
            name:'HIV',
            type:'line',
            stack: '总量2',
            data:ddata[2]
<!--            data:[1216,1786,1262,1485,2198,2184,2084,2081,2084,1320]-->
        },
        {
            name:'TUB',
            type:'line',
            stack: '总量',
            data:ddata[3]
<!--            data:[39,55,57,86,79,113,127,152,142,141]-->
        }
    ]
};
myChart.setOption(option);
    }

    function day(){
	    var ddata;
            $.ajax({
                url: {% url 'get_FHTday_data' %},
                type: "POST",
                async: false,
                data: {},
                success: function (data) {
<!--                    data = JSON.parse(data);-->
                    ddata = data;
                }
            });
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTmon_data' %},-->
<!--                type: "POST",-->
<!--                async: false,-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    ldata = data;-->
<!--                }-->
<!--            });-->
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTyear_data' %},-->
<!--                async: false,-->
<!--                type: "POST",-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    hdata = data;-->
<!--                }-->
<!--            });-->
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
   title: {
        text: '  '
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['FLU','HIV','TUB']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ddata[0]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'FLU',
            type:'line',
            stack: '总量1',
            data:ddata[1]
<!--            data:[2692,2513,2609,2576,2310,2226,2034,1993,1798,1830]-->
        },
        {
            name:'HIV',
            type:'line',
            stack: '总量2',
            data:ddata[2]
<!--            data:[1216,1786,1262,1485,2198,2184,2084,2081,2084,1320]-->
        },
        {
            name:'TUB',
            type:'line',
            stack: '总量',
            data:ddata[3]
<!--            data:[39,55,57,86,79,113,127,152,142,141]-->
        }
    ]
};
myChart.setOption(option);
    }
</script>


<script type="text/javascript">
    var ddata;
            $.ajax({
                url: {% url 'get_FHTday_data' %},
                type: "POST",
                async: false,
                data: {},
                success: function (data) {
<!--                    data = JSON.parse(data);-->
                    ddata = data;
                }
            });
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTmon_data' %},-->
<!--                type: "POST",-->
<!--                async: false,-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    ldata = data;-->
<!--                }-->
<!--            });-->
<!--            $.ajax({-->
<!--                url: {% url 'get_FHTyear_data' %},-->
<!--                async: false,-->
<!--                type: "POST",-->
<!--                data: {},-->
<!--                success: function (data) {-->
<!--                    data = JSON.parse(data);-->
<!--                    hdata = data;-->
<!--                }-->
<!--            });-->
    var myChart = echarts.init(document.getElementById('main'));
    var option = {
   title: {
        text: '  '
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['FLU','HIV','TUB']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ddata[0]
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'FLU',
            type:'line',
            stack: '总量1',
            data:ddata[1]
<!--            data:[2692,2513,2609,2576,2310,2226,2034,1993,1798,1830]-->
        },
        {
            name:'HIV',
            type:'line',
            stack: '总量2',
            data:ddata[2]
<!--            data:[1216,1786,1262,1485,2198,2184,2084,2081,2084,1320]-->
        },
        {
            name:'TUB',
            type:'line',
            stack: '总量',
            data:ddata[3]
<!--            data:[39,55,57,86,79,113,127,152,142,141]-->
        }
    ]
};
myChart.setOption(option);
   </script>


</html>